<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>直播播放</title>
<link rel="stylesheet" href="${ctx.contextPath}/ftl/css/liveVersionOne/fatstyle.css">
<link rel="stylesheet" href="${ctx.contextPath}/ftl/css/liveVersionOne/video-main.css">
<link rel="stylesheet" href="${ctx.contextPath}/ftl/css/liveVersionOne/pop.css">
<style>
	.live_div{width:800px;height:600px;background:#f0f0f0;}
	.fh_play{height:100%;}
</style>
</head>
<body>
<h1 class="main-title">直播间 html</h1>
<div>
	<div class="video-left">
		<div id="widget-video" class="widget-video">
	        <div id="main-video" class="main-video">
	            <div id="videoInteractions"></div>
	            <div id="audioInteractions" style="display: none;"></div>
	            <div class="call-box call-box-small" id="videoInteraction" style="display: none;">
	                <div class="call-tit">视频通话申请中...</div>
	                <div class="btn-toggle"></div>
	                <video id="interactionLocalVideo" style="height: 100%; width: 100%;" autoplay></video>
	            </div>
	
	            <!-- 直播视频模块 -->
	            <div id="livePlayer"></div>
	        </div>
	        <div id="video-tools" class="video-tools">
	            <a href="javascript:;" id="full-video" class="btn-full"> </a>
	        </div>
	    </div>
		<div id="question" class="question">
		    <div class="question-title">
		        <h2><i></i><span>提问区</span></h2>
		    </div>
		    <div class="question-main live-left">
		        <ul id="question-main" class="l-b-m-list">
		
		        </ul>
		    </div>
		    <div class="question-user">
		        <div class="llb-t">
		            <div class="face"></div>
		            <div class="o-t" id="only-me"><i></i>只看我的提问</div>
		        </div>
		        <div class="llb-b">
		            <div class="chat-send-content" id="question-content" contenteditable="true"></div>
		            <a href="javascript:;" class="btn btn-mini btn-chat" id="question-submit">发送</a>
		        </div>
		    </div>
		</div>
	</div>
	<!-- 直播视频模块 -->
	<div class="video-middle" id="video-middle">	
		 <div class="video-m-top" id="doc-main" data-module="1">
        <div class="document-main">

            <!-- 直播文档模块 -->
            <div id="drawPanel"></div>
            
        </div>
        <div id="ppt-tools" class="ppt-tools">
            <a href="javascript:;" id="full-ppt" class="btn-full"> </a>
        </div>
    </div>


    <div class="l-m-b">
        <div class="lmb-r">
            <ul class="lmb-r-tools">
                <li><a href="javascript:;" class="qh" id="btn-switch" title="切换窗口"></a></li>
                <li style="width: 100px; display: none;">
                    <input type="text" id="docId" placeholder="输入文档id">
                </li>
                <li style="width: 100px; display: none;"><input  id="pageIndeId" type="text" placeholder="输入页码"></li>
                <li style="width: 100px; display: none;"><input  id="jump_btn" type="button" value="跳转"></li>
                <li style="width: 100px; margin-left: 450px;">
                    <span class="fl mr5" style="float: left;" id="mr5"></span>
                    <a title="退出登录" href="javascript:void(0);" id="logout" class="wl exit" data-title="退出" style="display: none;"></a>
                </li>
                <span id="interactionMsg" style="padding-top: 5px; display: inline-block;"  style="display: none;"></span>
            </ul>
        </div>
    </div>
	</div>
	<!-- right start -->
	<div class="video-right live-right" id="video-right">
	    <div id="right-bar" class="right-bar">
	        <span id="right-switch" class="bar-switch right-icons"></span>
	    </div>
	    <div class="chat-main">
	        <div class="chat-title">
	            <h2><i></i><span>公共聊天区</span></h2>
	            <div class="chat-people" id="chat-people"></div>
	            <div class="userlist" id="list-main">
	                <i class="curr"></i>
	                <h3 class="h6">在线用户(<em id="people-number"></em>)</h3>
	                <ul id="people-list">
	                </ul>
	            </div>
	        </div>
	        <div class="chat-list l-r-m">
	            <ul id="chat-list" class="chat-list l-r-m-list">
	            </ul>
	        </div>
	        <div class="chat-send">
	            <div class="chat-tips-scroll" id="chat-tips-scroll">有<em>0</em>条未读记录。</div>
	            <div class="chat-tools">
	
	                <div class="lrb-t">
	                    <div class="face" id="btn-face"></div>
	                    <div class="o-t" id="isPrivateChat">
	                        对
	                        <span class="select-span">
	                                <span class="select-current" id="all">所有人</span>
	                                <em class="p-arrow"></em>
	                        </span>
	                        <ul id="private-name">
	                            <li id="all">所有人</li>
	                        </ul>
	                        说:
	                    </div>
	                </div>
	            </div>
	            <div class="chat-area">
	                <div class="chat-tips" id="chat-tips">
	                    <span class="arr"></span>
	                    <a href="javascript:;" class="tips-main">您现在感觉卡了吗？点这里</a>
	                    <a href="javascript:;" class="close-tips" id="close-tips">关闭提示</a>
	                </div>
	                <div class="lrb-b">
	                    <input class="chat-send-content" contenteditable="true" id="chat-content">
	                    <a href="javascript:;" class="btn btn-mini btn-chat" id="chat-submit">发送</a>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
</div>
<script src="${ctx.contextPath}/ftl/js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="${ctx.contextPath}/ftl/js/base.js"></script>
<script src="${ctx.contextPath}/ftl/js/common.js"></script>
<script src="${ctx.contextPath}/ftl/js/live.js"></script>
<script src="${ctx.contextPath}/ftl/js/ui.js"></script>
<script src="//view.csslcloud.net/js/liveSDK.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
	 	// 直播SDK参数配置
	    DWLive.init({
	        userid: '${userId}',
	        roomid: '${roomId}',
	        groupid: "", 
	        viewername: '',
	        viewertoken: '${pwd}',
	        viewercustomua: '',
	        language: 'en',
	        viewercustominfo: '{"exportInfos": [ {"key": "城市", "value": "北京"}, {"key": "姓名", "value": "哈哈"}]}',
	        fastMode:true
	    });
	
	
    });
    DWLive.onOnlineTeachers = function (data) {
	    $('#private-name li[role="teacher"]').remove();
	
	    for (var i = 0; i < data.teachers.length; i++) {
	        var teacher = data.teachers[i];
	        $('#private-name').prepend('<li role="teacher" id="' + teacher.id + '">' + teacher.name + '</li>');
	    }
	};
    function getDate(){
    	var nowDate = new Date();
		var year = nowDate.getFullYear()+1;
		var mon = nowDate.getMonth();
		var day = nowDate.getDate();
		var hous = nowDate.getHours();
		var min = nowDate.getMinutes();
    	var sec = nowDate.getSeconds();
		return year+"-"+mon+"-"+day+" "+hous+":"+min+":"+sec;    }
</script>
</body>
</html>